<template>
<div id="login">
	<div id="ico">
		<img src="@/assets/img/login_ico.png" >
	</div>
	<form id='login-form' class="mui-input-group">
		<div class="mui-input-row">
			<label><span class="iconfont iconzhanghao"></span></label>
			<input type="text" v-model="username" class="mui-input-clear mui-input" placeholder="请输入用户名">
		</div>
		<div class="mui-input-row">
			<label><span class="iconfont iconmima"></span></label>
			<input type="password" v-model="password" class="mui-input-clear mui-input" placeholder="请输入密码">
		</div>
		<div class="mui-input-row">
			<label><span class="iconfont iconyanzhengma"></span></label>
			<input type="number" v-model="yzm" class="mui-input-clear mui-input" placeholder="请输入验证码">
			<span class="random_yzm" @tap="yzminit">{{ranYzm}}</span>
		</div>
	</form>
	<div class="mui-content-padded">
		<button id="loginBtn" @tap="loginTap" class="mui-btn mui-btn-block">登录</button>
	</div>
	<div class="mui-input-row mui-checkbox" style="margin-top:5px;">
		<div style="width:100px;margin: 0 auto;position: relative;transform: translateX(-5px);">
			<label style="width:68px;padding:11px 0;text-align: left;margin-left: 28px;color: #ccc;">记住密码</label>
			<input style="left: -2px;width: 100px;" v-model="rempass" value="1" type="checkbox">
		</div>
	</div>
	<div class="mui-content-padded oauth-area">
		未满18周岁禁止购买<br>
		Copyright © 该平台版权所有
	</div>
</div>
</template>

<script>
import {loginApi} from "@/api/begin"
export default {
  name: 'login',
  data(){
	  return{
		username:'',
		password:'',
		yzm:'',
		ranYzm:'',
		rempass:[]
	  }
  },
  mounted(){
	//验证码初始化
	this.yzminit()
	//判断是否记住密码
	let rempassStorage = localStorage.getItem("caipiaoPass")
	if(rempassStorage){
		let remData = JSON.parse(rempassStorage)
		this.username = remData.username
		this.password = remData.password
	}
	//回车触发(切换输入框焦点+提交)
	mui.enterfocus('#login-form input', function() {
		mui.trigger(document.querySelector('#loginBtn'), 'tap');
	});
  },
  methods:{
	yzminit(){
		let ran = Math.random() + "";
		this.ranYzm = ran.slice(ran.length-4);
	},
	loginTap(){
		let loginInfo = {
			username: this.username,
			password: this.password,
			yzm:this.yzm
		};
		
		//校验
		let check = true;
		for (let key in loginInfo) {
			let tag = key=="username"?"用户名":(key=="password"?"密码":"验证码")
			if(loginInfo[key].trim()==""){
				mui.alert(tag + "不允许为空");
				check = false;
				return false;
			}
		}
		if(this.yzm!=this.ranYzm){
			mui.alert("验证码输入错误");
			this.yzminit();//重新随机
			check = false;
			return false;
		}
		
		delete loginInfo.yzm;
		
		mui.showLoading("登录中...")
		
		//校验通过
		if(check){
			loginApi(loginInfo).then(res=>{
				mui.hideLoading()
				if(res==200){
					//是否记住密码
					if(this.rempass[0] == "1"){
						localStorage.setItem("caipiaoPass",JSON.stringify(loginInfo))
					}else{
						localStorage.removeItem("caipiaoPass");
					}
					
					this.$router.replace({path:'/home'})
				}else if(res.message){
					mui.toast(res.message)
				}else{
					mui.toast("未知错误：",res)
				}
			})
		}
	}
  }
}
</script>

<style scoped lang="scss">
#login{height:100vh;background-image:url(../assets/img/login_bg.jpg);background-size:100% 100%;background-repeat:no-repeat}
#ico{height:30vh;text-align:center;padding-top:13vh}
#ico img{height:7vh}
.mui-input-group{margin:0 45px;background-color:transparent}
.mui-input-group:first-child{margin-top:20px}
.mui-input-group label{width:12%}
.mui-input-group:after,.mui-input-group:before{display:none}
.mui-input-row label{padding:9px 15px 9px 0}
.mui-input-group .mui-input-row:after{left:0;background-color:#fff}
.mui-icon{color:#fff}
.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea{width:88%;color:#fff}
input::-webkit-input-placeholder{color:#ccc}
input::-moz-input-placeholder{color:#ccc}
input::-ms-input-placeholder{color:#ccc}
.mui-input-row .iconfont,.mui-input-row .mui-input-clear~.mui-icon-clear{color:#fff}
.mui-checkbox input[type=checkbox],.mui-radio input[type=radio]{top:6px}
.mui-content-padded{margin:90px 45px 0 45px}
.mui-btn{padding:10px;border-radius:25px;border:0}
.oauth-area{position:absolute;bottom:20px;left:0;text-align:center;width:100%;padding:0;margin:0;color:#ccc;font-size:15px}
span.random_yzm{position:absolute;right:40px;font-size:20px;top:4px;background:#d5dbfd;padding:5px 15px;letter-spacing:5px;color:#3f4277}
.mui-input-group .mui-input-row.mui-checkbox:after{
	height: 0;
}
.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
    color: #d5dbfd;
}
</style>
